<template>
    <div class="data-set">
        <span>加入黑名单</span>
        <el-switch class="switch-pos"
                   v-model="value"
                   active-color="#13ce66"
                   inactive-color="#888888"
                   @change="changeStatus($event)" >
        </el-switch>
    </div>
</template>

<script>

    import {isBlackList,addBlackList,deleteBlackList} from "_a/blacklist";
    import {mapGetters} from "vuex";

    export default {
        name: 'DataSet',
        props:{
            friendId:{
                type:String
            },
            friendsList:{
                type:Array
            },
            blacksList:{
                type:Array
            },
            currentItem:{
                type:Object
            }
        },
        data() {
            return {
                value: false
            }
        },
        computed: {
            ...mapGetters(['userId', 'username', 'phone'])
        },
        methods: {
            getBlackListInfo() {//检查用户是否在黑名单中
                isBlackList(this.userId,this.friendId).then(res => {
                    this.value = res.data;
                })
            },
            addBlackList() {
                addBlackList(this.userId,this.friendId).then(res => {
                    if(true == res.data){
                        this.value = true
                        this.friendsList.splice(this.friendsList.indexOf(this.currentItem),1)
                        this.blacksList.push(this.currentItem)
                    }else{
                        this.value = false
                        let message = '加入黑名单失败'
                        this.$message({
                            type: 'success',
                            message
                        })
                    }
                })
            },
            deleteBlackList() {
                deleteBlackList(this.userId,this.friendId).then(res => {
                    if(true == res.data){
                        this.value = false
                        this.blacksList.splice(this.blacksList.indexOf(this.currentItem),1)
                        this.friendsList.push(this.currentItem)
                    }else{
                        let message = '移除黑名单失败'
                        this.$message({
                            type: 'success',
                            message
                        })
                        this.value = true
                    }
                })
            },
            changeStatus(callback) {
                if (true == callback) {
                    this.$confirm(`加入黑名单，你将不再收到对方的信息`, '加入黑名单', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(action => {
                        if('confirm'==action){//确定
                            this.value = true
                            //加入黑名单
                            this.addBlackList()
                        }
                    }).catch(err=>{//取消
                        if(err=='cancel'){
                            this.value = false
                        }
                    })
                } else {//删除黑名单
                    this.deleteBlackList()
                }
            }
        },
        mounted() {
            this.getBlackListInfo()
        }
    };
</script>

<style scoped>
    .data-set {
        padding: 30px;
    }
    .switch-pos {
        position: absolute;
        right: 30px;
    }
</style>
